<template>
  <div id="dialogAddEdit">
    <el-dialog
      class="about-set"
      :title="showTitle"
      :visible.sync="dialogData.isShow"
      width="420px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="岗位名称" prop="postName">
            <el-input v-model="ruleForm.postName"></el-input>
          </el-form-item>
          <el-form-item label="岗位编码" prop="postCode">
            <el-input v-model="ruleForm.postCode"></el-input>
          </el-form-item>
          <el-form-item label="显示顺序" prop="postSort">
            <el-input v-model.number="ruleForm.postSort"></el-input>
          </el-form-item>
          <el-form-item label="岗位状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio
                v-for="item in statusList"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getForm,
  postCode,
  postName,
  addPosts,
  editPosts
} from '@/api/system/post' // 接口
export default {
  name: 'DialogAddEdit',
  msg: '岗位管理-新增/编辑弹窗',
  props: ['dialogData'],
  data() {
    var valiPostSort = (rule, value, callback) => {
      if (!value) {
        callback(new Error('显示顺序不能为空'))
      } else {
        if (isNaN(value)) {
          callback(new Error('显示顺序必须为数字值'))
        } else {
          callback()
        }
      }
    }
    // 校验岗位名称是否重复
    var valiPostName = (rule, value, callback) => {
      let id = this.postId ? this.postId : 0
      let obj = {
        postName: this.ruleForm.postName,
        postId: this.postId
      }
      postName(
        id,
        obj,
        (response) => {
          if (response) {
            //true已重复
            callback(new Error('岗位名称已使用，请更换'))
          } else {
            //false-无重复
            callback()
          }
        },
        (res) => {
          callback(new Error('校验失败'))
        }
      )
    }
    // 校验角岗位编码是否重复
    var valiPostCode = (rule, value, callback) => {
      let id = this.postId ? this.postId : 0
      let obj = {
        postCode: this.ruleForm.postCode,
        postId: this.postId
      }
      postCode(
        id,
        obj,
        (response) => {
          if (response) {
            //true已重复
            callback(new Error('岗位编码已使用，请更换'))
          } else {
            //false-无重复
            callback()
          }
        },
        (res) => {
          callback(new Error('校验失败'))
        }
      )
    }
    return {
      isAdd: true, // 新增-true,编辑-false
      showTitle: '',
      loading: false,
      statusList: [
        // 状态列表
        { label: '正常', value: '0' },
        { label: '停用', value: '1' }
      ],
      postId: null, // 岗位编号
      ruleForm: {
        postName: '', // 岗位名称
        postCode: '', // 岗位编码
        postSort: null, // 显示顺序
        status: '0', // 岗位状态,默认正常
        remark: ''
      },
      rules: {
        postName: [
          { required: true, message: '岗位名称不能为空', trigger: 'blur' },
          { validator: valiPostName, trigger: 'blur' }
        ],
        postCode: [
          { required: true, message: '岗位编码不能为空', trigger: 'blur' },
          { validator: valiPostCode, trigger: 'blur' }
        ],
        postSort: { validator: valiPostSort, trigger: 'blur' },
        remark: {
          /* required: true, message: '请选择归属部门', trigger: 'change' */
        }
      }
    }
  },
  mounted() {
    this.isAdd = this.dialogData.type === 'add'
    this.showTitle = this.isAdd ? '新增' : '编辑'
    if (!this.isAdd) {
      // 编辑
      this.postId = this.dialogData.postId
      this.getFormData()
    }
  },
  methods: {
    /* 编辑时获取表单详情 */
    async getFormData() {
      await getForm(this.postId, (response) => {
        this.ruleForm = { ...response }
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.postId = null
      this.dialogData.postId = null
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirmLabel(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.subForm()
        } else {
          return false
        }
      })
    },
    /* 提交表单 */
    async subForm() {
      this.loading = true
      let obj = { ...this.ruleForm }
      if (this.isAdd) {
        await addPosts(
          obj,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message({
              message: this.showTitle + '失败',
              type: 'warning'
            })
          }
        )
      } else {
        // 编辑
        editPosts(
          this.postId,
          obj,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message({
              message: this.showTitle + '失败',
              type: 'warning'
            })
          }
        )
      }
    }
  }
}
</script>

<style lang="less">
// #dialogAddEdit {
// }
</style>
